<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    :width="width"
    :before-close="handleClose"
    :append-to-body="true"
    @open="open"
  >
    <div>
      <slot name="content"> </slot>
    </div>
    <template #footer v-if="false">
      <div class="dialog-footer">
        <el-button @click="handleCancel">Cancel</el-button>
        <el-button type="primary" @click="handleConfirm">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
defineProps({
  modelValue: {
    // 接收 v-model 的默认绑定值
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '500px',
  },
});

const emit = defineEmits([
  'update:modelValue',
  'confirm',
  'cancel',
  'closePayDialog',
  'openClick',
]);

const handleClose = () => {
  emit('update:modelValue', false); // 修改 modelValue 的值
  emit('closePayDialog');
};

const handleCancel = () => {
  emit('cancel');
  emit('update:modelValue', false);
};

const handleConfirm = () => {
  emit('confirm');
  emit('update:modelValue', false);
};
const open = () => {
  console.log('open');
  emit('openClick');
};
</script>
<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
